Add up/down keyboard arrow navigation to app display

svn path=/trunk/; revision=91

diff --git a/js/ui/appdisplay.js b/js/ui/appdisplay.js
index 69a6349c05c17ee51871274204ac0951f3fd854b..5c38d4f8259942414f59676fde730c0e643069b8 100644 (file)
--- a/js/ui/appdisplay.js
+++ b/js/ui/appdisplay.js
@@ -42,6 +42,8 @@ const APPDISPLAY_COMMENT_COLOR = new Clutter.Color();
 APPDISPLAY_COMMENT_COLOR.from_pixel(0xffffffbb);
 const APPDISPLAY_BACKGROUND_COLOR = new Clutter.Color();
 APPDISPLAY_BACKGROUND_COLOR.from_pixel(0x000000ff);
+const APPDISPLAY_SELECTED_BACKGROUND_COLOR = new Clutter.Color();
+APPDISPLAY_SELECTED_BACKGROUND_COLOR.from_pixel(0x00ff0055);
 
 const APPDISPLAY_HEIGHT = 50;
 const APPDISPLAY_PADDING = 4;
@@ -67,7 +69,7 @@ _init: function(appinfo, width) {
                return true;
        });
        this._bg = new Clutter.Rectangle({ color: APPDISPLAY_BACKGROUND_COLOR,
-               x: 0, y: 0 });
+               x: 0, y: 0, width: width, height: APPDISPLAY_HEIGHT });
        this._group.add_actor(this._bg);
 
        this._icon = new Clutter.Texture({ width: 48, height: 48, x: 0, y: 0 });
@@ -108,7 +110,15 @@ launch: function() {
 },
 appinfo: function () {
     return this._appinfo;
-}
+},
+markSelected: function(isSelected) {
+   let color;
+   if (isSelected)
+       color = APPDISPLAY_SELECTED_BACKGROUND_COLOR;
+   else
+       color = APPDISPLAY_BACKGROUND_COLOR;
+   this._bg.color = color;
+}   
 }
 Signals.addSignalMethods(AppDisplayItem.prototype);
 
@@ -134,6 +144,7 @@ _init : function(x, y, width, height) {
        global.stage.add_actor(this._grid);
        this._appset = {}; // Map<appid, appinfo>
        this._displayed = {} // Map<appid, AppDisplay>
+       this._selectedIndex = -1;
        this._max_items = this._height / (APPDISPLAY_HEIGHT + APPDISPLAY_PADDING);
 },
 
@@ -146,9 +157,9 @@ _refreshCache: function() {
                this._displayed[id].destroy();
        this._appset = {};
        this._displayed = {};
+       this._selectedIndex = -1;
        let apps = Gio.app_info_get_all();
-       let i = 0;
-       for (i = 0; i < apps.length; i++) {
+       for (let i = 0; i < apps.length; i++) {
                let appinfo = apps[i];
                let appid = appinfo.get_id();
                this._appset[appid] = appinfo;
@@ -182,12 +193,18 @@ _setDefaultList: function() {
        }
 },
 
+_getNDisplayed: function() {
+    // Is there a better way to do .size() ?
+    let c = 0; for (i in this._displayed) { c += 1; };
+    return c;
+},
+
 _filterAdd: function(appid) {
        let me = this;
 
        let appinfo = this._appset[appid];
        let name = appinfo.get_name();
-       let index = 0; for (i in this._displayed) { index += 1; };
+       let index = this._getNDisplayed();
 
        let appdisplay = new AppDisplayItem(appinfo, this._width);
        appdisplay.connect('activate', function() {
@@ -238,7 +255,7 @@ _doSearchFilter: function() {
        for (appid in this._appset) {
                if (matchedApps.length >= this._max_items)
                        break;
-               if (appid in this._displayed)
+               if (this._displayed[appid])
                        continue;
                let app = this._appset[appid];
                if (this._appinfoMatches(app, this._search))
@@ -263,27 +280,65 @@ setSearch: function(text) {
        this._redisplay();
 },
 
-searchActivate: function() {
+_findDisplayedByIndex: function(index) {
     let displayedActors = this._grid.get_children();
-    if (displayedActors.length != 1)
-        return;
-    let selectedActor = displayedActors[0];
-    let selectedMenuItem = null;
+    let actor = displayedActors[index];
+    return this._findDisplayedByActor(actor);
+},
+
+_findDisplayedByActor: function(actor) {
     for (appid in this._displayed) {
         let item = this._displayed[appid];
-        if (item.actor == selectedActor) {
-            selectedMenuItem = item;
-            break;
+        if (item.actor == actor) {
+            return item;
         }
-    }
-    log("selected " + selectedMenuItem);    
-    if (!selectedMenuItem)
+    }    
+    return null;
+},
+
+searchActivate: function() {
+    if (this._selectedIndex != -1) {
+        let selected = this._findDisplayedByIndex(this._selectedIndex);
+        selected.launch();
+        this.emit('activated');
         return;
-    
+    }     
+    let displayedActors = this._grid.get_children();
+    if (displayedActors.length != 1)
+        return;
+    let selectedActor = displayedActors[0];
+    let selectedMenuItem = this._findDisplayedByActor(selectedActor);
     selectedMenuItem.launch();
     this.emit('activated');
 },
 
+_selectIndex: function(index) {
+    if (this._selectedIndex != -1) {
+        let prev = this._findDisplayedByIndex(this._selectedIndex);
+        log("demarking " + prev);        
+        prev.markSelected(false);
+    }
+    this._selectedIndex = index;
+    let item = this._findDisplayedByIndex(index);
+    log("marking " + item);    
+    item.markSelected(true);
+},
+
+selectUp: function() {
+    let prev = this._selectedIndex-1;
+    if (prev < 0)
+        return;
+    this._selectIndex(prev);
+},
+
+selectDown: function() {
+    let next = this._selectedIndex+1;
+    let nDisplayed = this._getNDisplayed();
+    if (next >= nDisplayed)
+        return;
+    this._selectIndex(next);
+},
+
 show: function() {
        this._redisplay();
        this._grid.show();

diff --git a/js/ui/overlay.js b/js/ui/overlay.js
index 22b197df96c238604e4862b89176dd8dd0b5081c..ee300cc3cb8edcf0c46cb04f5ca5d90840477a26 100644 (file)
--- a/js/ui/overlay.js
+++ b/js/ui/overlay.js
@@ -95,12 +95,23 @@ _init : function(width) {
         });
     });
     this._searchEntry.connect('activate', function (se) {
-        log("activate " + me._searchActive);
         if (!me._searchActive)
             return false;
         me._appdisplay.searchActivate();
         return true;
     });
+    this._searchEntry.connect('key-press-event', function (se, e) {
+        let code = e.get_code();
+        log("code: " + code);
+        if (code == 111) {
+            me._appdisplay.selectUp();
+            return true;
+        } else if (code == 116) {
+            me._appdisplay.selectDown();
+            return true;
+        }
+        return false;
+    });
 
     let appsText = new Clutter.Label({ color: SIDESHOW_TEXT_COLOR,
         font_name: "Sans Bold 14px",